<template>
	<u-popup
		v-model="editNameShow"
		mode="center"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="center">
				<view class="title">名称修改</view>
				<view class="farm-name input-bg">
					<u-input 
						v-model="form.farm"
						class="input"
						:clearable="false"
						placeholder="这里是农场名称" />
					<image
						src="/static/images/chicken/edit.png"
						mode="widthFix"></image>
				</view>
				<view class="chicken-name input-bg">
					<u-input
						v-model="form.name"
						class="input"
						:clearable="false"
						placeholder="这里是小鸡名称" />
					<image
						src="/static/images/chicken/edit.png"
						mode="widthFix"></image>
				</view>
				<view class="tip">无需修改的名称空白提交即可</view>
				<view class="submit" @click="submit">
					<image
						src="/static/images/chicken/btn.png"
						mode="widthFix"></image>
					<text>确认</text>
				</view>
			</view>
			
			<image
				class="bg"
				src="/static/images/chicken/bg_name.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'editName',
		props: {
			editNameShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				form: {},
			}
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'editNameShow');
			},
			submit() {
				this.changeShow();
				this.$emit('nameSuccess', this.form);
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 586rpx;
		min-height: 744rpx;
		background-color: transparent;
		.center {
			position: absolute;
			left: 0;
			top: 205rpx;
			z-index: 1;
			width: calc(100% - 146rpx);
			margin-left: 73rpx;
			text-align: center;
			.title {
				font-size: 36rpx;
				font-weight: 500;
				color: #732011;
			}
			.input-bg {
				position: relative;
				height: 88rpx;
				margin-top: 40rpx;
				border-radius: 20rpx;
				background-color: #FFE5C9;
				::v-deep .input {
					width: calc(100% - 70rpx);
					line-height: 88rpx;
					.u-input__input {
						min-height: 88rpx !important;
						padding-left: 36rpx;
					}
					.uni-input-placeholder,
					.uni-input-input {
						color: #DF9D6D !important;
					}
				}
				image {
					width: 25rpx;
					position: absolute;
					top: 50%;
					right: 36rpx;
					transform: translateY(-50%);
				}
			}
			.tip {
				margin: 32rpx 0 40rpx;
				opacity: .4;
				font-size: 24rpx;
				font-weight: 400;
			}
			.submit {
				position: relative;
				image {
					width: 364rpx;
				}
				text {
					position: absolute;
					left: 50%;
					top: 45%;
					transform: translate(-50%, -50%);
					font-size: 32rpx;
					font-weight: 500;
					color: #fff;
				}
			}
		}
		.bg {
			width: 100%;
		}
		.close {
			position: absolute;
			right: 46rpx;
			top: 100rpx;
			width: 46rpx;
		}
	}
}
</style>